<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'app',
  consrts: 'asd',
  data () {
    return {
      val: 1,
      callback: [],
      microTimerFunc: '',
      _resolve: '',
    }
  },
  mounted () {
    //this.next().then(console.log);
  },
  methods: {
    next () {
      const p = Promise.resolve();
      this.microTimerFunc = () => {
        p.then(this.flushCallbacks)//then异步  //flushCallbacks回调
      }//为什么要用Promise，原因是等copy()执行完以后再执行flushCallbacks()
      return this.copy();
    },//模拟$nextTick方法
    copy () {
      let _this = this;
      this.callback.push(function () {
        console.log(3)
        if(_this._resolve) _this._resolve(_this);
      })
      this.microTimerFunc();
      return new Promise((resolve) => {
        console.log(1)
        this._resolve = resolve;//同步
      })
    },
    flushCallbacks () {
      console.log(2)
      const copies = this.callback.slice(0);
      this.callback.length = 0;
      for (let i = 0; i < copies.length; i++) {
        copies[i]()
      }
    },//执行存放的回调函数
  },
  mounted () {
    /*this.next().then(() => {
      console.log('lll')
    })*/
  },
  created () {
    /*let div = document.createElement('div');
    div.innerHTML = `<div a="\n"/>`;
    console.log(div.innerHTML)*/
    /*console.log(this.$options)
    let a = [1,2,3,4,5,6];
    let b = [1,2,1,3,6,8,5,7,8];
    let ff = false;
    const mm = a.filter((c,i) => {
      return ff || (ff = (b[i] !== c))
    })
    console.log(mm)*/
    /*let arr = [11,22,33];
    function* helloWorldGenerator() {
      for (let i = 0; i<arr.length; i++){
        yield new Promise((res) => {
          setTimeout((a)=>{
            let mm = res;
            setTimeout((c)=> {
              console.log(c)
              mm(c)
            },1000,a)
          },1000,i)
        });
      }
      return 'ending';
    }

    let hw = helloWorldGenerator();
    function fuc() {
      hw.next().value.then((a)=>{
        console.log(arr.length)
        if(a == 2) return
        fuc()
      })
    }
    fuc()*/
    /*function pa(kk) {
      return new Promise((res) => {
        setTimeout((aa) => {
          console.log(aa)
          res()
        },1000,kk)
      })
    }
    let obj = {
      * [Symbol.iterator]() {
        yield pa(11);
        yield pa(22);
      }
    };

    for (let x of obj) {
      console.log(x);
    }*/
    /*class kk {
      constructor () {

      }
      addDep (val) {
        console.log(val)
      }
    }
    class mm {
      static target = new kk();
      constructor () {

      }
      depend () {
        mm.target.addDep(this)
      }
    }
    let arr = new mm();
    arr.depend();*/
  }
}
</script>

<style>
  @import "assets/css/common.css";
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    height: 100%;
  }
</style>
